<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>会议室统计</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/project_set.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script type="text/javascript" src="/js/plugin/echarts.min.js" ></script>
	<script type="text/javascript" src="/js/common.js" ></script>
</head>
<style>
	div.main{
		height: 100%;
	}
</style>
<body>
	<div class="main">
		<div class="nav-container-content">
			<header class="nav-header">
				<h2 class="header-title">会议室使用率统计</h2>
			</header>
			<div class="nav-body" id="nav-side">
				<div class="layui-form" >
					<div class="layui-form-item" style="padding-left: 52px;" >
						<div class="layui-input-inline">
							<input type="text" class="layui-input" placeholder="选择时间" id="usageRateDate">
						</div>
						<div class="layui-input-inline">
							<select name="" lay-filter="dateTl" >
								<option value="">请选择</option>
								<option value="1" >一个月</option>
								<option value="3" selected="selected" >三个月</option>
								<option value="6">六个月</option>
								<option value="12">一年</option>
							</select>
						</div>
						<div class="layui-input-inline">
							<select name="" id="project" lay-filter="project" >
							</select>
						</div>
					</div>
				</div>
		    	<div id="usageRate" style="width: 100%;height:400px;"></div>
			</div>
		</div>
	</div>
</body>
<script >

//会议室使用率统计图表的配置项和数据
var option1 = {
	xAxis: {
	    type: 'time',
	    interval:3600 * 24 * 1000
	},
	tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
	yAxis: {
	    type: 'value',
	    name:'使用率',
	    axisLabel : {
            formatter : '{value}%' 
		}
	},
	series: [{
	    type: 'line',
	    smooth: true,
	    data:[[
	    	'2017/08/01',20
	    ],[
	    	'2017/08/02',30	
	    ]]
	}]
};

var paramsUsageRate={projectId:$("#projectId",top.document).val()};//会议室使用统计查询参数
var myChart1 = echarts.init(document.getElementById('usageRate'));
$(function(){
	layui.use(['form','laydate'],function(){
		var laydate = layui.laydate,form=layui.form;
		
		//初始化分店下拉 
		initFormSelectsExt({//分店ffff
			id: "project",
			url: '/app/customerInfo/getProjectJson',
			defaultValue:paramsUsageRate.projectId,
			first: "*"	//代表没有默认提示项
		});
		
		laydate.render({
		   elem: '#usageRateDate', //指定元素 
		   //value: staDate+' ~ '+endDate,
		   range: '~',
		   done: function(value, date, endDate){
			   	var rangeDate = value.split(' ~ ');
				paramsUsageRate.staDate=rangeDate[0];
				paramsUsageRate.endDate=rangeDate[1];
				initChart1();
			}
		});
		form.on('select(dateTl)',function(data){
			$("#usageRateDate").val("");
			var now=new Date();
			//以当前时间为结束时间 计算区间 
			var endDate=now.format('yyyy-MM-dd');
			now.setMonth(now.getMonth()-data.value);
			var staDate=now.format('yyyy-MM-dd');
			
			paramsUsageRate.staDate=staDate;
			paramsUsageRate.endDate=endDate;
			initChart1();
		});
		form.on('select(project)',function(data){
			paramsUsageRate.projectId=data.value;
			initChart1();
		});
	});
	//初始化各个图表
	// 会议室使用率统计
	initChart1();
});
function initChart1(){
	$.post("/app/statistical/roomUsageRate",{params:paramsUsageRate},function(data){
		option1.series[0].data=convDouArray(data);
	    // 使用刚指定的配置项和数据显示图表。
	    myChart1.setOption(option1);
	});
}

/* 转换成二维数组 */
function convDouArray(data){
	var array=new Array();
	for(var i = 0;i<data.length;i++){
		array.push([data[i].x,parseFloat(data[i].y)]);
	}
	return array;
}
</script>
</html>